import React ,{memo,useState} from 'react'
import "../../../assets/Layout/im.scss"
import { Image ,Avatar} from 'antd';

function ImList(){
  const [visible, setVisible] = useState(false);


  const dfText = ( <div className="im-item-box">
    <div className="im-tx-box">
      <Avatar shape="square" size={50}  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /></div>
    <div className="im-nr-box">
      <div className="im-top-name">
        <div>张三</div>
      </div>
      <div className="im-c-box">dsgdsgdsgdsgdsgsdgdsgsdgsdgdsgsdgdsgdsgdsgd</div>

    </div>

  </div>)
  const dfImg = (  <div className="im-item-box">
    <div className="im-tx-box">
      <Avatar shape="square" size={50}  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /></div>
    <div className="im-nr-box">
      <div className="im-top-name">
        <div>张三</div>
      </div>
      <Image
        width={200}
        className="im-img"
        onClick={() => setVisible(true)}
        preview={false}
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
      />
      <Image
        width={200}
        style={{ display: 'none' }}
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
        preview={{
          visible,
          src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          onVisibleChange: (value) => {
            setVisible(value);
          },
        }}
      />
    </div>

  </div>)

  const zjText = (<div className="im-item-box im-item-box-r">
    <div className="im-nr-box ">
      <div className="im-top-name">
        <div>张三</div>
      </div>
      <div className="im-cr-box">dsgdsgdsgdsgdsgsdgdsgsdgsdgdsgsdgdsgdsgdsgd</div>
    </div>
    <div className="im-tx-box">
      <Avatar shape="square" size={50}  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /></div>
  </div>)

  const zjImg = (<div className="im-item-box im-item-box-r">
    <div className="im-nr-box ">
      <div className="im-top-name">
        <div>张三</div>
      </div>
      <div className="im-cr-box-im">
        <Image
          width={200}
          className="im-img-r"
          onClick={() => setVisible(true)}
          preview={false}
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        />
        <Image
          width={200}
          style={{ display: 'none' }}
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
          preview={{
            visible,
            src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            onVisibleChange: (value) => {
              setVisible(value);
            },
          }}
        />
      </div>
    </div>
    <div className="im-tx-box">
      <Avatar shape="square" size={50}  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
    </div>
  </div>)
  const xt = (  <div className="im-text-box">你已添加了小栗，现在可以开始聊天了。</div>)
  const sj = ( <div className="im-text-box">昨天 <span>20:00</span></div>)

  return<>
    {xt}
    {dfText}
    {zjText}
    {dfImg}
    {sj}
    {zjImg}

  </>

}

export default memo(ImList)
